<template>
  <div class="box">
    <img src="../../assets/img/背景3.jpg" class="background-img" alt="">
    <div class="inner-box">
    <img src="../../assets/img/未登录头像.jpg" class="img2" alt="">
    <el-form
      ref="Login"
      :model="user"
      :rules="rules"
      status-icon
      label-width="160px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名:" prop="userName">
        <el-input v-model="user.userName" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input
          v-model="user.password"
          type="password"
          placeholder="请输入密码"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="but1" @click="submitForm()"
          >登录</el-button
        >
      </el-form-item>
      账号选择:
      <el-radio-group v-model="radio" class="radio">
        <el-radio label="admin" size="large" @click="fn1">admin</el-radio>
        <el-radio label="superAdmin" size="large" @click="fn2">superAdmin</el-radio>
      </el-radio-group>
    </el-form>
  </div>
  </div>
</template>

<script setup lang="ts" name="Login">
import { loginImg, userLogin, userAdmin, superAdmin, userLogins } from '@/api/login'
import { ref, reactive, onMounted ,  } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import  permissionStore  from '@/stores/permission'
import { ElMessage } from 'element-plus'
import userStore from '../../stores/user.ts'
// 创建仓库实例
const userS = userStore()
const userP = permissionStore()
const route = useRoute()
const router = useRouter()
// 获取dom元素
const login = ref()

// 定义输入框
// const user = ref<any>(JSON.parse(JSON.stringify('')))
  const user = reactive({
    userName: '',
    password: ''
})

// 选择账号 默认账号
const radio = ref('admin')
// 定义验证
const rules = reactive({
  userName: [
      {
        required: true,
        message: '该字段必须填写', // 当验证不通过时 错误提示文本
        trigger: 'blur' // 验证触发时机  默认是 blur
      }
  ],
  password: [
    {
      required: true,
      message: '该字段必须填写', // 当验证不通过时 错误提示文本
      trigger: 'blur' // 验证触发时机  默认是 blur
    }
  ]
})
// admin用户登录
  const fn1 = () => {
    userAdmin().then(res => {
      // console.log('admin',res);
      // ref.login.resetFields()
      user.userName = res.data.data.userName
      user.password = res.data.data.password
    })
  }
  // superAdmin用户登录
  const fn2 = () => {
    superAdmin().then(res => {
      // console.log('超级管理员',res);
      // 让radio(单选框)的常量在superAdmin上面亮
      radio.value = 'superAdmin'
      user.userName = res.data.data.userName
      user.password = res.data.data.password
    })
  }
  // 获取表单dom
  const Login = ref<any>(null)
  
  // 登录
  const submitForm = () => {
    Login.value.validate().then(() => {
      // 判断他是不是超级管理员账号
      if(radio.value === 'superAdmin'){
        userLogins().then((res : any) =>{
          if(res.data.code === 200){
            //!(解构赋值) 利用解构赋值把接口中的数据存到缓存中
            const { token, userInfo, role } = res.data.data
            //立即把获取到的数据缓存 为了pinia的状态持久化
            localStorage.setItem( 'token',token)
            localStorage.setItem( 'userInfo',JSON.stringify(userInfo))
            localStorage.setItem( 'role', role)
            // 也存储到pinia中 (仓房实力.仓库方法)
            userS.INIT_USER_INFO(res.data.data)
            // 成功提示
            ElMessage({
              type: 'success',
              message:'登录成功',
              duration: 1500,
              // 1.5秒后执行的代码
              onClose: () => {
                // 跳转到根目录(根目录是dashBoard)
                router.replace('/')
              }
            })
            return
          }
        })
      }else{
        // 普通用户登录
      userLogin().then((res : any) =>{
        if(res.data.code === 200){
          const { token, userInfo, role } = res.data.data
          //立即把获取到的数据缓存 为了pinia的状态持久化
          localStorage.setItem( 'token',token)
          localStorage.setItem( 'userInfo',JSON.stringify(userInfo))
          localStorage.setItem( 'role', role)
          // 也存储到pinia中
          userS.INIT_USER_INFO(res.data.data)
           // 成功提示
          ElMessage({
            type: 'success',
            message:'登录成功',
            duration: 1500,
            // 1.5秒后执行的代码
            onClose: () => {
              router.replace('/')
            }
          })
          
        }
      })
      }
    // Login.value.validate().then(() => {
      
    // })
  })
    
    
  }
// 初始化前获取
onMounted(() => {
  fn1()
})
</script>

<style lang="scss" scoped>
.img2{
  position: absolute;
  width: 80px;
  border-radius: 20px;

}
.radio{
  margin-left: 40px;
}
.box{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .background-img {
    position: absolute;
    width: 100%;
    height: 100%;
    vertical-align: center;
    z-index: -1;
  }
  .inner-box{
    border-radius: 20px !important;
    // margin-left: -100px;
    z-index: 1;
    background: rgba(255,255,255,0.4);
    border-radius: 5px;
    // flex: 1;
    padding: 50px;
  }
  .but1{
    margin-left: 135px;
  }
}
.login-btn{
  margin-top: 30px;
}

</style>